<template>
    <div class='comp'>
        <!-- 图表区域 -->
        <div class='chart' ref='pie'></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
        };
    },
    mounted() {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.adapTive)
        // 4.使用适配方法
        this.adapTive()
    },
    methods: {
        // 1.定义获取实例 设置基础静态配置项的绘图方法
        initEcharts(){
           // 1.1获取实例对象
            this.echartsInstance = this.$echarts.init(this.$refs.pie,'vintage')
            // 1.2设置静态配置项（配置项是不会变的）
            let initOptions={
               // 配置标题
               title:{
                    text:"▍主要地区农作物种植占比",
                    top:"3%",
                    left:"3%"
                },
                // 提示语
                tooltip: {
                    show:true
                },
            }
            // 1.3绘制图表
            this.echartsInstance.setOption(initOptions)
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('cropAreasProportion')
            this.allData = data;
            // console.log(data)
            this.setEcharts()
            // 使用适配方法
            this.adapTive()
        },
        // 3.根据业务数据继续完善图表
        setEcharts(){
            // 3.1根据城市组装对应图表系列 series:[{type:pie,center,radius,data},{},{},{}.....]
            let count = this.allData.length;//获取数据的个数
            let serirseData = this.allData.map((item,index)=>{
                return {
                    type:"pie",
                    data:[{name:item.areas+"\n"+item.zb+"%",value:item.zb},{value:item.other}],
                    radius:[120,160],
                    center:[100/(count+1)*(index+1)+'%','50%'],
                    label:{
                        position:"center"
                    }
                }
            })
            console.log(serirseData)
            // 3.2设置完善的配置项
            let setOptions={
                series:serirseData//配置系列数据
            }
            // 3.3再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.窗口适配
        adapTive(){
            console.log('窗口适配了')
            // 设置比例尺
            let width = this.$refs.pie.offsetWidth;
            // 比例尺基数3.5-3.7
            let scale = width/100*3.6

            let serirseData = this.allData.map((item,index)=>{
                return {
                    radius:[scale*1.3,scale*1.5],
                    label:{
                        fontSize:scale/2//设置图元上的文字的字体大小
                    }
                }
            })
            let adapOption={
                // 配置标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                series:serirseData
            }
            // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
        }
    },
    beforeDestroy(){
        // 注销窗口监听器 防止内存泄露
        window.removeEventListener('resize',this.adapTive)
    }
};
</script>

<style scoped>

</style>
